<template>
  <right-drawer title="礼物" :show="show">
    <div class="msgs" v-el:gifts>
      <ul>
          <li v-for="gift in gifts">
              <div class="msg">
                  <span class="msg-time">{{gift.date}}</span>
                  <span class="msg-user">{{gift.nn}}:</span>
                  <span class="msg-content"><span class="gift-name">{{gift.giftName}}</span><span class="hits">{{gift.hits}}</span>连击</span>
              </div>
          </li>
      </ul>
    </div>
  </right-drawer>
</template>

<script>
import rightDrawer from './rightDrawer'
import { isShowGift, getGifts } from '../../vuex/getters'
import { bindGiftEl } from '../../vuex/actions'
export default {
  vuex: {
    getters: {
      show: isShowGift,
      gifts: getGifts
    },
    actions: {
      init: bindGiftEl
    }
  },
  attached () {
    this.init(this.$els.gifts)
  },
  components: {
    rightDrawer
  }
}
</script>

<style lang="less">
.msgs{
  padding: 0px 10px;
  position: absolute;
  width: 100%;
  top: 60px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow-y: scroll;
  ul{
    list-style: none;
    margin: 0px;
    padding: 10px;
  }
}
.msg{
  padding: 5px 0px;
  span{
    margin-right: 5px;
  }
  .msg-time{
    color:#2c3e50;
  }
  .msg-user{
    color: #56abe4;
  }
  .msg-content{
    color: #4a4a4a;
    span{
      padding: 0px 5px;
    }
    .gift-name{
      color:#ff630e;
    }
    .hits{
      color:#eb4f38;
    }
  }
}
.msg-gift .msg{
  span{
    color: #eb4f38;
  }
}
</style>
